#notifications,
.tip_notifications,
.quick_create,
#categories_moods {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 9001;
  left: 0;
  background: $notification-backdrop;
}

.titlebar {
  background: linear-gradient(90deg, $background-color 97%, $transparent 3%);
  width: 50%;
  position: fixed;
  z-index: 20;

  @media screen and (max-width: $medium) {
    width: 80%;
  }

  @media screen and (max-width: $small) {
    width: 100%;
  }

  .align_left {
    float: left !important;
    display: inline-block;
    width: auto !important;
    padding: 40px 0px 20px 40px;

    @media screen and (max-width: $small) {
      padding: 20px 0px 20px 20px;
    }
  }

  .align_right {
    float: right !important;
    display: inline-block !important;
    width: auto !important;
    padding: 40px 40px 20px 0px;

    @media screen and (max-width: $small) {
      padding: 20px 20px 20px 0px;
    }
  }
}

.modal_text {
  margin-top: 100px;
  padding: 0px 40px 40px 40px;

  @media screen and (max-width: $small) {
    margin-top: 80px;
    padding: 0px 20px 20px 20px;
  }
}

@media screen and (max-width: $medium) {
  .tip_notifications,
  .quick_notifications,
  #categories_moods {
    .padding_right {
      padding-right: 20px !important;
    }
  }
}

#notifications_text,
.tip_notifications_text,
.quick_create_text,
#categories_moods_text {
  margin: 10% auto;
  width: 50%;
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid $container-color;
  box-shadow: 0 0 10px $container-color;
  background-color: $background-color;

  @media screen and (max-width: $medium) {
    width: 80%;
  }

  @media screen and (max-width: $small) {
    margin: 0 auto;
    width: 100%;
    max-height: 100%;
    height: 100%;
    border: none;
    box-shadow: none;
  }
}

.titlebar.scrolling {
  box-shadow: 0 0 10px $secondary-text-color;
}

a.notification_link:link,
a.notification_link:visited,
a.tip_notification_link:link,
a.tip_notification_link:visited,
a.quick_create_link:link,
a.quick_create_link:visited {
  margin-top: 20px;
  display: block;
  text-decoration: none;
  color: $link-color;
  border-bottom: none;

  @media screen and (max-width: $small) {
    margin-top: 10px;
  }
}

a.notification_link:hover,
a.tip_notification_link:hover,
a.quick_create_link:hover {
  margin-top: 20px;
  display: block;
  text-decoration: none;
  color: $link-color;
  border-bottom: none;
  opacity: 0.5;

  @media screen and (max-width: $small) {
    margin-top: 10px;
  }
}

#notifications_none {
  margin-top: 20px;

  @media screen and (max-width: $small) {
    margin-top: 10px;
  }
}

.tip_notifications_button {
  cursor: pointer;
}

.tip_notifications_button:hover,
#categories_quick_button:hover,
#moods_quick_button:hover,
#strategies_quick_button:hover {
  opacity: 0.5;
}

h1.notification_name,
h1.tip_close_notifications,
h1.quick_create_close,
h1#clear_notifications,
h1#close_notifications,
h1#close_categories_moods, {
  font-weight: 300;
  font-size: $font26;
  padding: 0;
  margin: 0px;
  color: $secondary-text-color;

  @media screen and (max-width: $medium) {
    font-size: $font22;
  }

  @media screen and (max-width: $small) {
    font-size: $font20;
  }
}

h1#clear_notifications {
  cursor: pointer;
}

.quick_create_text div.table div.table_row,
.tip_notifications_text div.table div.table_row,
#notifications_text div.table div.table_row,
#categories_moods_text div.table div.table_row {
  display: table-row;
}

.quick_create_text div.table div.table_cell,
.tip_notifications_text div.table div.table_cell,
#notifications_text div.table div.table_cell,
#categories_moods_text div.table div.table_cell {
  display: table-cell;
  word-break: break-word;
}

#notifications .align_left,
#notifications .align_right,
#categories_moods .align_left,
#categories_moods .align_right {
  @media screen and (max-width: $medium) {
    width: auto !important;
  }
}

.quick_create {
  textarea {
    width: 100%;
  }

  label {
    font-size: $font26;
    font-weight: 300;

    @media screen and (max-width: $medium) {
      font-size: $font24;
    }
  }

  .label {
    width: auto;
    display: inherit;
    font-size: $font26;
    margin-bottom: 10px;

    @media screen and (max-width: $medium) {
      font-size: $font24;
      margin-bottom: 5px;
    }
  }
}

.notifications_button.fade{
  opacity: 0.5;
}

.show_backdrop {
  overflow: hidden;
}
